<template>
  <div class="app-container">
    <el-input
      placeholder="请输入单位名称,内容为空则展示所有单位信息"
      v-model="searchName"
      class="input-with-select"
      style="width: 400px"
      @keyup.enter.native="search"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="search"
      ></el-button>
    </el-input>
    <router-link :to="{ path: '/company/create' }">
      <el-button type="primary" style="margin-bottom: 10px; margin-left: 10px"
        >创建单位信息</el-button
      >
    </router-link>
    <el-button
      @click="dialogVisible = true"
      type="info"
      plain
      style="margin-left: 10px"
      >查看地区划分</el-button
    >

    <el-dialog title="地区划分" :visible.sync="dialogVisible" width="36%">
      <span style="font-size: 16px"
        ><span style="font-weight: bold">东部地区：</span
        >北京、天津、河北、辽宁、上海、江苏、浙江、福建、山东、广东、海南</span
      >
      <br />
      <br />
      <span style="font-size: 16px"
        ><span style="font-weight: bold">中部地区：</span
        >山西、吉林、黑龙江、安徽、江西、河南、湖北、湖南</span
      >
      <br />
      <br />
      <span style="font-size: 16px"
        ><span style="font-weight: bold">西部地区：</span
        >四川、重庆、贵州、云南、西藏、陕西、甘肃、青海、宁夏、新疆、广西、内蒙古</span
      >
    </el-dialog>

    <!-- 提示信息：继承 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      fit
      :stripe="true"
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column v-if="!isSearching" type="expand" prop="children" key="0">
        <template slot-scope="scope">
          <el-table :data="scope.row.children" :show-header="false">
            <el-table-column
              width="220"
              prop="orgName"
              align="center"
            ></el-table-column>
            <el-table-column
              width="140"
              prop="orgRegion"
              align="center"
            ></el-table-column>
            <el-table-column width="180" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.grassrootType == 0">非国家基层单位</span>
                <span v-else-if="scope.row.grassrootType == 1">城镇社区</span>
                <span v-else-if="scope.row.grassrootType == 2">个体</span>
                <span v-else-if="scope.row.grassrootType == 3"
                  >艰苦行业事业单位</span
                >
                <span v-else-if="scope.grassrootType == 4">农村建制村</span>
                <span v-else-if="scope.row.grassrootType == 5"
                  >县及县以下企业单位</span
                >
                <span v-else-if="scope.row.grassrootType == 6"
                  >县及县以下事业单位</span
                >
              </template>
            </el-table-column>
            <el-table-column width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.defenseMilitary == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column width="180" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.collegeInstitute == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="keyNational" width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.keyNational == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="keyMedical" width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.keyMedical == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="keyFinancial" width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.keyFinancial == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="keyMedia" width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.keyMedia == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="office" width="180" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.office == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="keySoftware" width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.keySoftware == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column prop="inforSafety" width="140" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.inforSafety == 0"></span>
                <span v-else><i class="el-icon-check"></i></span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <router-link
                  :to="{
                    path: '/company/create',
                    query: { id: scope.row.id },
                  }"
                >
                  <el-button
                    type="text"
                    style="margin-right: 20px"
                    size="small"
                  >
                    编辑
                  </el-button>
                </router-link>
                <el-button
                  type="text"
                  @click="handleDelete(scope.row.id, 2)"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column> -->

      <!-- <el-table-column
        v-if="!isSearching"
        width="220px"
        align="center"
        label="单位名称"
        prop="orgParent"
        key="1"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.orgParent }}</span>
        </template>
      </el-table-column> -->
      <!-- 这里删除了        v-if="isSearching" -->
      <el-table-column
        width="240px"
        align="center"
        label="单位名称"
        prop="orgName"
        key="2"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.orgName }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column
        v-if="isSearching"
        width="220px"
        align="center"
        label="上级单位名称"
        key="3"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.orgParent }}</span>
        </template>
      </el-table-column> -->

      <el-table-column width="140px" align="center" label="地区">
        <template slot-scope="scope">
          <span>{{ scope.row.orgRegion }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="国家基层单位类别">
        <template slot-scope="scope">
          <span v-if="scope.row.grassrootType == 0">非国家基层单位</span>
          <span v-else-if="scope.row.grassrootType == 1">城镇社区</span>
          <span v-else-if="scope.row.grassrootType == 2">个体</span>
          <span v-else-if="scope.row.grassrootType == 3">艰苦行业事业单位</span>
          <span v-else-if="scope.row.grassrootType == 4">农村建制村</span>
          <span v-else-if="scope.row.grassrootType == 5"
            >县及县以下企业单位</span
          >
          <span v-else-if="scope.row.grassrootType == 6"
            >县及县以下事业单位</span
          >
        </template>
      </el-table-column>

      <el-table-column width="140" align="center" label="国防军工">
        <template slot-scope="scope">
          <span v-if="scope.row.defenseMilitary == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>

      <el-table-column
        min-width="180px"
        align="center"
        label="重点院校和科研单位"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.collegeInstitute == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>

      <el-table-column width="140" align="center" label="重点国有企业">
        <template slot-scope="scope">
          <span v-if="scope.row.keyNational == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>

      <el-table-column width="140" align="center" label="重要医疗机构">
        <template slot-scope="scope">
          <span v-if="scope.row.keyMedical == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>

      <el-table-column width="140" align="center" label="重要金融单位">
        <template slot-scope="scope">
          <span v-if="scope.row.keyFinancial == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>
      <el-table-column width="140" align="center" label="主流新闻媒体">
        <template slot-scope="scope">
          <span v-if="scope.row.keyMedia == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="党政机关（非选调生）">
        <template slot-scope="scope">
          <span v-if="scope.row.office == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>
      <el-table-column width="140" align="center" label="核心软件">
        <template slot-scope="scope">
          <span v-if="scope.row.keySoftware == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>
      <el-table-column width="140" align="center" label="信息安全">
        <template slot-scope="scope">
          <span v-if="scope.row.informSafety == 0"></span>
          <span v-else><i class="el-icon-check"></i></span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <router-link
            :to="{ path: '/company/create', query: { id: scope.row.id } }"
          >
            <el-button type="text" style="margin-right: 20px"> 编辑 </el-button>
          </router-link>
          <!-- <router-link
            :to="{
              path: '/company/create',
              query: { orgParent: scope.row.orgParent },
            }"
          >
            <el-button v-if="!isSearching" type="text" style="margin-right: 20px" size="small">
              添加下级单位
            </el-button>
          </router-link> -->
          <el-button type="text" @click="handleDelete(scope.row.id, 1)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="text-align: center"
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageCount"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getOrganizationList, deleteOragnization, searchOrganization } from '@/api/company.js'

export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageCount: 1,
        size: 10
      },
      dialogVisible: false,
      searchName: '',
      isSearching: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true

      if (!this.isSearching) {
        //在获取所有单位列表时
        getOrganizationList(this.listQuery).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.listLoading = false;
        }).catch(err => {
          console.log(err)
        });
      } else {
        //在搜索时
        let data = {
          orgName: this.searchName,
          pageCount: this.listQuery.pageCount,
          size: this.listQuery.size
        }
        searchOrganization(data).then(response => {
          if (response.data.total == 0) {
            this.$message({
              type: 'error',
              message: '名称为 ' + this.searchName + ' 的单位信息不存在'
            })
            this.isSearching=false
            this.getList()

          } else {
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
          }
        }).catch(err => {
          console.log(err)
        });
      }
    },
    handleEdit(row) {
      this.$router.push({
        path: '/company/create',
        name: 'create',
        params: {
          dataObj: row
        }
      })
    },
    handleDelete(id, type) {
      if (type == 1) {
        this.$confirm('此操作将删除该单位，确定删除嘛？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id,
            type: 1
          }
          deleteOragnization(data).then(response => {
            this.$message({
              type: 'success',
              message: '删除单位成功'
            })
            this.getList()
          }).catch(err => {
            console.log(err)
          })

        }).catch(() => {
          //do nothing
        });
      } else {
        let data = {
          id: id,
          type: 2
        }
        deleteOragnization(data).then(response => {
          this.$message({
            type: 'success',
            message: '删除单位成功'
          })
          this.getList()
        }).catch(err => {
          console.log(err)
        })
      }
    },
    search() {
      if (this.searchName == "") {//输入框为空时，返回所有的单位信息
        this.isSearching = false;
        this.getList();
      } else {
        this.isSearching = true;
        this.getList();
      }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>

